<template>
  <div>
    <el-card>
      <div slot="header" class="df aic jcsb">
        <span>店铺管理</span>
        <el-button v-if="!isShow" @click="isShow = true" class="fff gree"
          >编辑</el-button
        >
        <div v-else>
          <el-button @click="isShow = false">取消</el-button>
          <el-button class="fff gree" @click="handleShopEdit">完成</el-button>
        </div>
      </div>
      <el-form :disabled="!isShow" :model="shopForm" label-width="80px">
        <el-form-item label="店铺名称">
          <el-input v-model="shopForm.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告">
          <el-input
            class="text-area"
            :rows="7"
            type="textarea"
            v-model="shopForm.bulletin"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            action="http://sell.h5.itsource.cn:8087/shop/upload"
            :on-success="handleSuccess"
            :show-file-list="false"
          >
            <img v-if="shopForm.avatar" :src="shopForm.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="店铺图片">
          <el-upload
            action="http://sell.h5.itsource.cn:8087/shop/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="shopForm.pics"
            :on-success="handleShopUpload"
			:before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="起送价格">
          <el-input v-model="shopForm.minPrice"></el-input>
        </el-form-item>
        <el-form-item label="配送费">
          <el-input v-model="shopForm.deliveryPrice"></el-input>
        </el-form-item>
        <el-form-item label="配送时间">
          <el-input v-model="shopForm.deliveryTime"></el-input>
        </el-form-item>
        <el-form-item label="配送描述">
          <el-input v-model="shopForm.deliveryTime"></el-input>
        </el-form-item>
        <el-form-item label="店铺评分">
          <el-input v-model="shopForm.score"></el-input>
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="shopForm.sellCount"></el-input>
        </el-form-item>
        <el-form-item label="活动">
          <el-checkbox-group v-model="shopForm.supports">
            <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
            <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
            <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="shopForm.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { api_shop_info, api_shop_edit } from "@/apis/shop";
export default {
  data() {
    return {
      //         name	店铺名称
      // bulletin	公告
      // avatar	店铺头像
      // deliveryPrice	配送费
      // deliveryTime	送达时间
      // description	描述
      // score	评分
      // sellCount	销量
      // supports	活动 数组 []
      // pics	店铺图片 数组 [‘url1’，‘url2’]
      // date	营业时间 数组 []
      // minPrice	起送价格
      shopForm: {
        name: "",
        bulletin: "",
        avatar: "",
        minPrice: "",
        deliveryPrice: "",
        deliveryTime: "",
        description: "",
        score: "",
        sellCount: "",
        supports: [],
        pics: [],
        date: [],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      isShow: false,
    };
  },
  created() {
    this.getShopInfo();
  },
  methods: {
    //获取店铺详情
    async getShopInfo() {
      const res = await api_shop_info();
      // 处理照片墙，预览图格式，再进行赋值
      res.data.data.pics = res.data.data.pics.map((item) => {
        return {
          name: item,
          url: item,
        };
      });
      this.shopForm = res.data.data;
      // console.log(res);
    },

    // onSubmit() {
    // 	console.log("submit!");
    // },
    // 图片删除
    handleRemove(file, fileList) {
      this.shopForm.pics = fileList;
      // console.log("fileList",fileList);
      // console.log('pics',this.shopForm.pics);
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 店铺头像上传成功后
    handleSuccess(res) {
      let { code, imgUrl } = res;
      if (code === 0) {
        this.shopForm.avatar = imgUrl;
      }
    },
    // 店铺图片上传成功后
    handleShopUpload(res,file) {
		// console.log("file",file);
      let { code, imgUrl, msg } = res;
      if (code == 0) {
        this.$message.success(msg);
        this.shopForm.pics.push({
          name: imgUrl,
          url: imgUrl,
        });
        // console.log(this.shopForm.pics);
      }
    },

// 店铺图片上传成功之前
beforeAvatarUpload(file) {
				// file.type === 'image/jpeg';
				const isJPG = /(png|jpeg|webp)/.test(file.type);
				const isLt2M = file.size / 1024 / 1024 / 1024 < 20;

				if (!isJPG) {
					this.$message.error(
						"上传头像图片只能是 JPG/png/webp 格式!"
					);
				}
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 20MB!");
				}
				return isJPG && isLt2M;
			},



    // 修改店铺信息
    async handleShopEdit() {
		// 处理数据
		let pics=this.shopForm.pics.map(v=>v.url)
		const res = await api_shop_edit({
			...this.shopForm,
			pics
		})
		if(res.data.code==0){
           this.isShow=false;
		   this.getShopInfo();
		}
	},
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}
.text-area {
  width: 300px;
}
// 店铺头像
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep.el-textarea__inner {
  height: 150px;
}
::v-deep.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
